<!--
 * @Author: yaonan
 * @Date: 2021-10-25 16:03:12
 * @LastEditors: yaonan
 * @LastEditTime: 2021-11-08 09:51:53
 * @Description:订单评论
-->
<template>
  <div class>
    <!-- 模糊查询 -->
    <div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="searchForm.content" placeholder="请输入关键字" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.orderId" placeholder="请输入订单编号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="未审核" value="未审核"></el-option>
            <el-option label="通过" value="通过"></el-option>
            <el-option label="不通过" value="不通过"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="tableData" style="width: 100%" v-loading='loading'>
        <el-table-column type="index" :index="1" label="序号" width="60"></el-table-column>
        <el-table-column prop="content" label="评论内容" width="180" align="center"></el-table-column>
        <el-table-column prop="customerId" label="顾客编号" align="center"></el-table-column>
        <el-table-column prop="orderId" label="订单编号" align="center"></el-table-column>
        <el-table-column prop="commentTime" label="评论时间" align="center">
          <template
            slot-scope="scope"
          >{{moment(scope.row.commentTime).format('YYYY-MM-DD :HH:MM:ss')}}</template>
        </el-table-column>
        <el-table-column prop="status" label="评论状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status==='通过'">{{scope.row.status}}</el-tag>
            <el-tag type="danger" v-else>{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button @click="deleteById(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[2, 5, 8, 10]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
let moment = require("moment");
import {
  pageQuery,
  submit,
  deleteById,
  checkPass,
  checkNoPass
} from "@/api/ordercomments";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      total: 0,
      loading:false,
      searchForm: {},
      params: {
        page: 1,
        pageSize: 10
      },
      tableData: []
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    params:{
      handler(){
        this.queryPage()
      },
      deep:true
    }
  },
  // 组件方法
  methods: {
    handleSizeChange(val) {
      this.params.pageSize=val;
      this.params.page=1
    },
    handleCurrentChange(val) {
      this.params.page=val;
    },
    // 去删除
    async deleteById(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let res = await deleteById({ id });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.queryPage();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    toSearch() {
      this.queryPage();
    },
    moment,
    // 分页模糊查询订单评论
    async queryPage() {
      let temp = {
        ...this.params,
        ...this.searchForm
      };
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      this.loading=true;
      let res = await pageQuery(temp);
      this.tableData = res.data.list;
      this.total = res.data.total;
      this.loading=false;

    }
  },
  created() {
    this.queryPage();
  },
};
</script>
<style lang="scss">
  
</style>
